<template>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="header">
      <span class="header_title">月用量统计</span>
      <el-radio-group v-model="dataValue" style="float: right;bottom: 5px;" size="mini" @change="radioChange">
        <el-radio-button :label="6">近半年</el-radio-button>
        <el-radio-button :label="12">近一年</el-radio-button>
      </el-radio-group>
<!--      <el-date-picker-->
<!--        style="float: right; padding: 3px 0; width: 90px;bottom: 10px;" size="mini"-->
<!--        v-model="dataValue"-->
<!--        type="year"-->
<!--        value-format="yyyy"-->
<!--        :clearable="false"-->
<!--        @change="handleDateChange"-->
<!--        placeholder="选择年">-->
<!--      </el-date-picker>-->
    </div>
    <div id="main" ref="main"></div>
  </el-card>
</template>

<script>
import { homepageMonthUsageDataForXb } from '@/api/index/meteread.js'
import {generMonthgenerateDates, getMonths} from "../../../utils/computeDays";
import moment from "moment";
import * as echarts from 'echarts';
require('echarts/theme/macarons')
// import { histogramEchartSetting } from "./histogramsetting";
export default {
  name: "MonthDosageStatisticsEcharts",
  data() {
    return {
      chartExtend: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          x: 20, //距离左侧距离
          y: 40,//距离顶部距离
          x2: 5, //距离右侧距离
          y2: 0, //距离底部距离
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '用量',
            position: 'left',
            axisLabel: {
              formatter: '{value} m³'
            },
          }
        ],
        series: [{
          name: '用量',
          type: 'bar',
          barWidth: '40%',
          animationDuration: 2000,
          animationEasing: 'quarticln',
          itemStyle: {
            // borderRadius: 10,
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#5C87E5' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#47F4FF' // 100% 处的颜色
                }
              ]
            },
          },
          data: [],
          tooltip: {
            valueFormatter: function (value) {
              return value + ' m³';
            }
          },
        }]
      },
      dataList: [],
      dataValue: 6,
      time: [moment(new Date()).subtract(6,'months').format('yyyy-MM'), moment(new Date()).subtract(1,'months').format('yyyy-MM')]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 监听单选框改变事件
    radioChange(value) {
      this.resetEchart()
      this.dataValue = value
      this.time = [moment(new Date()).subtract(value, 'months').format('yyyy-MM'),moment(new Date()).subtract(1, 'months').format('yyyy-MM')]
      this.getList()
    },
    // // 监听时间选择框改变事件
    // handleDateChange(value) {
    //   this.resetEchart()
    //   this.dataValue = value
    //   this.getList()
    // },
    // 获取数据
    getList() {
      let params = {
        beginDate: this.time[0],
        endDate: this.time[1]
      }
      homepageMonthUsageDataForXb(params).then(response => {
        if(response.code === 200) {
          this.dataList = response.data
          this.renderChart(this.dataList)
        }
      })
    },
    // 处理数据
    renderChart(res){
      let seriesList = []
      const xAxisList = getMonths(this.time[0], this.time[1])
      this.resetEchart()
      res.forEach(item => {
        if(item.usage == null){
          item.usage = ''
        }
        seriesList.push([item.date, item.usage])
      })
      this.chartExtend.series[0].data = seriesList
      this.chartExtend.xAxis[0].data = xAxisList
      this.initEchart()
    },
    // 初始化图表
    async initEchart() {
      let myChart = echarts.init(this.$refs.main)
      myChart.setOption(this.chartExtend, true)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    },
    // 重置图表
    resetEchart(){
      this.chartExtend.series[0].data = []
      this.chartExtend.xAxis[0].data = []
    }
  },
}
</script>
<style lang="scss" scoped>
#main{
  height: 100%;
  width: 100%;
}
::v-deep .el-card__header {
  padding: 7px 15px 7px 20px !important;
}

::v-deep .el-card__body {
  height: 27vh !important;
}
</style>
